<template>
    <div id="tmpl">
        <div id="postcomment">
            <h3>提交评论</h3>
            <p class="p"></p>
            <textarea placeholder="请输入您要评论的内容" v-model="postcontent"></textarea>
        </div>
        <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
        <div id="list">
            <h3>评论列表</h3>
            <p class="p"></p>
            <div v-for="(item,index) in list">
                <div class="title">
                    <span>第{{index+1}}楼&nbsp;&nbsp;</span>
                    <span>用户:{{item.user_name}}&nbsp;&nbsp;</span> 发表时间:
                    <span>{{item.add_time | datefmt('YYYY-MM-DD hh:mm:ss')}}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" v-text="item.content"></li>
                </ul>
            </div>
        </div>
        <!--获取更多按钮  -->
        <mt-button type="danger" size="large" @click="getmore" v-text="tipmsg" plain></mt-button>
    </div>
</template>
<script>
    import {
        Toast
    } from 'mint-ui';
    import common from '../../kits/common.js'
    export default {
        data() {
            return {
                postcontent: '', //用来获取用户填写的内容
                pageindex: 1,
                list: [],
                tipmsg:'点击加载更多'
            }
        },
        methods: {
            postcomment() { //评论数据的提交
                //内容为空无法提交
                
                if (this.postcontent.trim().length <= 0) {
                    Toast('请输入您要评论的内容');
                    return;
                }
                // console.log(this.id);
                var url = common.apidomain + '/api/postcomment/' + this.id
                //获取到用户在文本框中获取的内容
                //发送请求
                this.$http.post(url, {
                    content: this.postcontent
                }, {
                    emulateJSON: true
                }).then(function (res) {
                    Toast(res.body.message);
                });
                //清空文本框内容
                this.list=[
                    {
                        "user_name":"匿名用户",
                        "add_time":new Date(),
                        "content":this.postcontent
                    }
                ].concat(this.list);
                this.postcontent = '';
                this.getcomment();
            },
            getcomment() {
                var url = common.apidomain + '/api/getcomments/' + this.id + '?pageindex=' + this.pageindex;
                this.$http.get(url).then(function (res) {
                    console.log(res);
                    var body = res.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return;
                    }
                    if(body.message.length==0){
                        this.tipmsg="已没有更多内容了";
                        return;
                    }
                    // for(var i=0;i<body.message.length;i++){
                    //     this.list.push(body.message[i]);
                    // }
                    this.list=this.list.concat(body.message)
                    
                })

            },
            getmore() {
                this.pageindex+=1;
                this.getcomment();
            }
        },
        props: ['id'], //用来接收父组件的传值
        created() {
            this.getcomment();
        }
    }
</script>
<style scoped>
    /*实现提交评论样式  */

    #postcomment {
        padding: 5px;
    }

    .p {
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgba(0, 0, 0, .3);
    }

    #lisst {
        padding: 5px;
    }

    .title {
        padding: 5px;
        font-size: 12px;
        background-color: rgba(0, 0, 0, .3);
    }
</style>